import React, { useEffect, useState } from 'react'
import { NavBar, SearchBar, Tag, List, Switch, Button } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import instance from '../../axios/instance'
import './search.css'

function Index() {
    const navigate = useNavigate()
    const [hotSearchData, setHotSearchData] = useState([])
    const [searchData, setSearchData] = useState([])

    //热门搜索
    const hotSearch = () => {
        instance.get('/health/share/v1/popularSearch').then(res => {
            console.log('res', res)
            if (res.status === 200) {
                setHotSearchData(res.data.result)
            }
        })
    }
    useEffect(() => {
        hotSearch()
    }, [])

    //首页搜索
    const handelSearch = (keyWord) => {
        if (keyWord === '') {
            setSearchData([])
        }
        else {
            instance.get('/health/share/v1/homePageSearch', {
                params: {
                    keyWord
                }
            }).then(res => {
                console.log('ressyss', res)
                if (res.status === 200) {
                    setSearchData(res.data.result.doctorSearchVoList)
                }
            })
        }
    }

    return (
        <div>
            <NavBar onBack={() => navigate(-1)} right={<div>搜索</div>}>
                <SearchBar placeholder='请输入医生名称' onChange={keyWord => handelSearch(keyWord)} />
            </NavBar>

            {
                searchData.length > 0 ? <div className='ls'>
                    <List>
                        {
                            searchData.map((item, index) => {
                                return <List.Item key={index}>{item.doctorName}</List.Item>
                            })
                        }
                    </List>
                </div> : ''
            }

            <div style={{ marginTop: '20px' }}>
                <h3>热门搜索</h3>
                {
                    hotSearchData.map((item, index) => {
                        return <Tag key={index} style={{ margin: '5px' }}>{item.name}</Tag>
                    })
                }
            </div>

        </div>
    )
}

export default Index
